<template>
  <div>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      :maskClosable="false"
      :title="'选择' + title"
      :width="modalWidth"
      :destroyOnClose="true"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleCancel">
            取消
          </a-button>
          <a-button v-if="del" @click="handleDel" type="primary">
            删除
          </a-button>
          <a-button v-if="!del" @click="handleOk" type="primary">确认</a-button>
        </div>
      </template>
      <a-row :gutter="24">
        <a-form-model ref="ruleForm" :model="queryParam">
          <a-col
            :span="6"
            v-if="
              title !== '生产计划' && title !== '加工单' && title !== '销售订单'
            "
          >
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :label="title + '名称'"
              hasFeedback
            >
              <a-input
                :placeholder="'请输入' + title + '名称'"
                v-model.trim="queryParam[name]"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6" v-if="title !== '人员' && code !== ''">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :label="title + '编号'"
              hasFeedback
            >
              <a-input
                :placeholder="'请输入' + title + '编号'"
                v-model.trim="queryParam[code]"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6" v-if="title == '生产计划'">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品名称"
              hasFeedback
            >
              <a-input
                placeholder="请输入商品名称"
                v-model.trim="queryParam.goodsName"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6" v-if="title == '生产计划'">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="商品编号"
              hasFeedback
            >
              <a-input
                placeholder="请输入商品编号"
                v-model.trim="queryParam.goodsCode"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-button
              type="primary"
              style="margin-top:3px"
              @click="handleSearch(searchKey)"
              >查询</a-button
            >
            <!-- <a-button
              type="primary"
              v-if="
                !(
                  title == '加工单' ||
                  title == '删除设备' ||
                  title == '删除产线'
                )
              "
              style="margin-top:3px;margin-left:20px"
              @click="handleAdd"
              >新增</a-button
            > -->
            <a-button
              type="primary"
              style="margin-top:3px;margin-left:20px"
              @click="handleAllList"
              >全部{{ title }}查询</a-button
            >
          </a-col>
        </a-form-model>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="treeSpan">
          <div class="treeBox">
            <a-tree
              v-if="treeData.length > 0"
              :show-line="true"
              defaultExpandAll
              :tree-data="treeData"
              :selected-keys="selectedKeys"
              @select="onSelect"
              :replaceFields="replaceFields"
            >
            </a-tree>
          </div>
        </a-col>
        <a-col :span="tableSpan">
          <a-table
            v-if="title != '销售订单'"
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            :pagination="pagination"
            @change="handleTableChange"
            bordered
            :rowKey="(record, index) => record.id"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              type: mode,
              onChange: onSelectChange,
            }"
          >
          </a-table>

          <a-table
            v-else
            :columns="columns"
            :data-source="tableData"
            :loading="loading"
            :scroll="{ x: 3000 }"
            :pagination="pagination"
            @change="handleTableChange"
            bordered
            :rowKey="(record, index) => record.id"
            :row-selection="{
              selectedRowKeys: selectedRowKeys,
              type: mode,
              onChange: onSelectChange,
            }"
          >
          </a-table>
        </a-col>
      </a-row>
      <component
        v-if="dynamicComponent"
        ref="modalForm"
        :treeData="treeData"
        @ok="modalFormOk"
        @getTree="getTree"
        :is="dynamicComponent"
      ></component>
    </a-modal>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      title="删除类型"
      v-if="deletekey == 'equipmentDelete'"
      ref="modalType"
      :visible="isDelType"
      :mask="false"
      @ok="handleDeleOk"
      @cancel="handleDelCancel"
    >
      <a-radio-group v-model="value" @change="radioChange">
        <a-radio :value="0">
          设备报废
        </a-radio>
        <a-radio :value="1">
          设备信息删除
        </a-radio>
      </a-radio-group>
    </a-modal>
    <a-modal
      ok-text="确认"
      cancel-text="取消"
      v-if="deletekey == 'DeleteProductLine'"
      ref="modalType"
      :visible="isDelType"
      :mask="false"
      @ok="handleDeleOk"
      @cancel="handleDelCancel"
    >
      确定{{ title }}
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

export default {
  mixins: [tableMinxins],
  props: {
    // 表头配置项
    columns: {
      type: Array,
      default: [],
    },
    // 类型树 接口
    treeKey: {
      type: String,
      default: "",
    },
    // 表格 接口
    tableKey: {
      type: String,
      default: "",
    },
    // 删除接口
    deletekey: {
      type: String,
      default: "",
    },
    // 树联动表格查询字段
    searchKey: {
      type: String,
      default: "",
    },
    // 模糊搜索名称字段
    name: {
      type: String,
      default: "",
    },
    // 模糊搜索编号字段
    code: {
      type: String,
      default: "",
    },
    // 单选多选模式,不传时为单选
    mode: {
      type: String,
      default: "radio",
    },
    filename: {
      type: String,
      default: "",
    },
    del: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      title: "",
      visible: false,
      isDelType: false,
      confirmLoading: false,
      treeSpan: 0,
      tableSpan: 24,
      model: {},
      treeData: [],
      tableOption: [], // 所有数据
      modalWidth: 1440,
      value: 0,
      deleteType: 0,
    };
  },
  computed: {
    dynamicComponent() {
      // 这里通过路由参数判断引入文件
      let filename = this.filename;
      if (filename !== "") {
        return () => import("./" + filename + ".vue");
      } else {
        return false;
      }
    },
  },
  mounted() {},
  methods: {
    async getTree() {
      const res = await api[this.treeKey]();
      this.treeData = res.data;
    },
    async getList(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      this.loading = true;
      if (arg === 1) {
        this.pagination.current = 1;
      }
      this.queryParam.deleteFlag = "N";
      var params = this.getQueryParams();
      const res = await api[this.tableKey](params);
      this.tableData = res.data.data;
      this.pagination.total = res.data.total;
      this.loading = false;
    },
    modalFormOk() {
      this.queryParam = {};
      // 新增/修改 成功时，重载列表
      this.getList();
      this.getOption();
      //清空列表选中
      this.onClearSelected();
    },
    // 获取全部数据
    async getOption() {
      let params = { pageNumber: 1, pageSize: 10, deleteFlag: "N" };
      if (this.tableKey === "WorksheetList") {
        let id = Number(this.selectedKeys.toString());
        if (id !== 0) {
          params.id = id;
        }
      } else {
        params.pageSize = 99999999;
      }
      const res = await api[this.tableKey](params);
      this.tableOption = res.data.data;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
      this.pagination.current = 1;
      this.pagination.pageNumber = 1;
      this.queryParam[this.searchKey] = selectedKeys[0];
      this.getList();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    modalAdd() {
      this.modalEdit({});
    },
    // 编辑
    modalEdit(record) {
      this.resetScreenSize();
      this.visible = true;
      this.model = Object.assign({}, record);
      if (this.treeKey !== "") {
        this.treeSpan = 6;
        this.tableSpan = 18;
        this.getTree();
      } else {
        this.treeSpan = 0;
        this.tableSpan = 24;
      }
      if (this.tableKey !== "") {
        this.getList();
        this.getOption();
      }
    },
    handleOk(e) {
      const that = this;
      that.confirmLoading = true;
      that.handleSubmit();
    },
    handleSubmit() {
      let result = [];
      this.tableOption.forEach((item) => {
        this.selectedRowKeys.includes(item.id) && result.push(item);
      });
      this.$emit("tableSelect", result, this.tableOption);
      this.visible = false;
      this.confirmLoading = false;
      this.selectedKeys = [];
      this.selectedRowKeys = [];
    },
    handleCancel(e) {
      this.visible = false;
      this.model = {};
      this.tableData = [];
      this.queryParam = {};
      this.selectedKeys = [];
      this.$emit("ok");
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.modalWidth = screenWidth;
      } else {
        this.modalWidth = 1440;
      }
    },
    //删除
    handleDel() {
      if (this.selectedRowKeys == 0) {
        this.$message.success("没有选择删除目标");
      } else {
        this.isDelType = true;
      }
    },
    handleDelCancel() {
      this.isDelType = false;
    },
    //删除类型选择
    radioChange(e) {
      console.log("radio checked", e.target.value);
      this.deleteType = e.target.value;
    },
    async handleDeleOk() {
      if (this.deletekey == "equipmentDelete") {
        const res = await api.equipmentDelete({
          ids: this.selectedRowKeys,
          deleteType: this.deleteType,
        });
        this.$message.success(res.message);
        this.getList();
      } else {
        let id = this.selectedRowKeys[0];
        const res = await api.DeleteProductLine({ id });
        this.$message.success(res.message);
        this.getList();
      }

      this.isDelType = false;
    },
  },
};
</script>
